var vue = new Vue({
    el: '#app',
    data: {
        inputValue: '',
        lists: [
            {id:1, eventVal: '未完成事件1', status: false },
            {id:2, eventVal: '未完成事件2', status: false },
            {id:3, eventVal: '未完成事件3', status: false },
            {id:4, eventVal: '完成事件1', status: true },
            {id:5, eventVal: '完成事件2', status: true },
            {id:6, eventVal: '完成事件3', status: true },
        ],
        option:'', //保存下拉列表的名字
        optionList:['所有事件','未完成事件','完成事件'],
        listsId: 0, //lists中的id，在add方法中添加数组对象的时候递增添加进数组
        tipMessage:""
    },
    methods: {
        add() {
            this.listsId++; 
            if (this.inputValue != '') {    //判断输入的值是否为空
                var str = { id: this.listsId, eventVal: this.inputValue, status: false } //要加进数组的对象
                this.lists.push(str);    //点击按钮，将input中的值存储到数组list中
                this.inputValue = '';   //添加后input内容为空，方便再次添加事件
            } else {
                // alert('请输入正确的事件名')
                this.tipMessage = "请输入要添加的事件名称";
            }

        },
        //将事件改为完成事件
        complete (val) {
            this.lists.forEach(element => {
                if (element.id == val) element.status = true;     //将数组中对象的未完成状态改为已完成
            });
        },
        //将事件改为未完成事件
        uncomplete (val) {
            this.lists.forEach(element => {
                if (element.id == val) element.status = false;     //将数组中对象的未完成状态改为未完成
            });
        },
        //删除方法
        del (val) {
            var subscript; //定义一个数组下标
            //首先查找指定的元素在数组中的位置，即id,返回该数组对象的下标
            this.lists.forEach(function (value, index) {
                if (value.id == val) return subscript = index;
            })
            //删除数组中该下标对象
            this.lists.splice(subscript, 1);
        }
    }
})
